/* eslint-disable no-unused-vars */
import React, { useState, useEffect } from 'react';
import { Form, Input, Table, Select, Button, Space } from 'antd';
import qs from 'qs';
import Cookies from 'js-cookie';
import { Link, useHistory } from 'react-router-dom';
import If from 'babel-plugin-jsx-control-statements';
import RequestApi from '@/utils/request';
import css from './index.scss';

/**
 * 停车备案管理
 */
export default () => {
	const [form] = Form.useForm();
	const history = useHistory();

	const [data, setData] = useState();
	// 初始状态的的body，可以展示最初的信息
	const originBody = {
		districtId: Cookies.get('districtId'),
		manageOrgName: null,
		name: null,
		parkLevel: null,
		parkLotType: null,
		propertyOrgName: null,
		sno: null,
		status: null,
	};
	const [body, setBody] = useState(originBody);
	// 获取所有所在区域中的地址
	const [districtNames, setDistrictNames] = useState();
	// 获取所有的区域的id以及name
	const [address, setAddress] = useState();
	useEffect(() => {
		RequestApi.connection('post', `parkLotRecordTask/getRecordManage`, body).then((response) => {
			const datas = response.data;
			const districtNameList = [];
			setData(datas);
			for (let i = 0; i < datas.length; i += 1) {
				districtNameList.push(datas[i].districtName);
				districtNameList.push('石油路街道');
			}
			// 重新修改所在区域中的地址，删除重复的地址
			setDistrictNames(Array.from(new Set(districtNameList)));
		});
	}, [body]);
	useEffect(() => {
		RequestApi.connection('get', `district/getList`).then((response) => {
			const address = [];
			for (let i = 0; i < response.data.length; i += 1) {
				address.push({ id: response.data[i].id, name: response.data[i].name });
			}
			setAddress(address);
		});
	}, []);
	const onFinish = (values) => {
		console.log('Success:', values);
		let districtId = 0;
		// 通过名字找到所对应的id
		for (let i = 0; i < address.length; i += 1) {
			if (address[i].name === values.districtName) {
				districtId = address[i].id;
			}
		}
		console.log(districtId);
		setBody({
			districtId,
			manageOrgName: null,
			name: values.name,
			parkLevel: values.parkLevel,
			parkLotType: values.parkLotType,
			propertyOrgName: null,
			sno: values.sno,
			status: values.status,
		});
	};

	const reset = () => {
		form.resetFields();
		setBody(originBody);
	};

	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};
	const columns = [
		{
			title: '功能列',
			dataIndex: 'id',
			key: 'id',
			render: (text, record) => {
				return (
					<Space>
						<Link
							to={{
								pathname: `/parking-record/check`,
								search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
							}}
						>
							详情
						</Link>
						<Link
							to={{
								pathname: `/parking-record/check`,
								search: qs.stringify({ id: record.id, value: 2, type: record.type, stage: record.stage }),
							}}
						>
							流程履历
						</Link>
					</Space>
				);
			},
			width: 120,
		},
		{
			title: '办结剩余时限',
			dataIndex: 'nodeDays',
			key: 'nodeDays',
			render: (text) => {
				return (
					<>
						<span>{text}</span>
						<span>天</span>
					</>
				);
			},
			width: 120,
		},
		{
			title: '备案类型',
			dataIndex: 'type',
			key: 'type',
			render: (text) => {
				return <span>{text === 0 ? '申办' : text === 1 ? '变更' : null}</span>;
			},
			width: 100,
		},
		{
			title: '所在环节',
			dataIndex: 'stage',
			key: 'stage',
			render: (text) => {
				return (
					<span>
						{text === 0
							? '在线提交备案信息'
							: text === 1
							? '区停车办资料初核'
							: text === 2
							? '区停车办现场勘察'
							: text === 3
							? '区市镇级备案审核'
							: null}
					</span>
				);
			},
		},
		{
			title: '处理状态',
			dataIndex: 'status',
			key: 'status',
			render: (text) => {
				return (
					<span>
						{text === 0
							? '暂存'
							: text === 1
							? '审核中'
							: text === 2
							? '已退回'
							: text === 3
							? '已废弃'
							: text === 4
							? '已完成(审核流程完成)'
							: null}
					</span>
				);
			},
		},
		{
			title: '流水号',
			dataIndex: 'sno',
			key: 'sno',
		},
		{
			title: '停车场名称',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '停车场类型',
			dataIndex: 'parkLotType',
			key: 'parkLotType',
			render: (text) => {
				return (
					<>
						<span>{text === 1 ? '配建' : text === 2 ? '公共' : null}</span>
					</>
				);
			},
			width: 100,
		},
		{
			title: '停车场等级',
			dataIndex: 'parkLevel',
			key: 'parkLevel',
			render: (text) => {
				return (
					<>
						<span>{text === 0 ? '普通' : text === 1 ? '特级' : null}</span>
					</>
				);
			},
			width: 100,
		},
		{
			title: '停车场地址',
			dataIndex: 'address',
			key: 'address',
		},
		{
			title: '所属区域',
			dataIndex: 'districtName',
			key: 'districtName',
		},
		{
			title: '车位数(个)',
			dataIndex: 'planParkCount',
			key: 'planParkCount',
			width: 100,
		},
	];

	return (
		<>
			<Form
				form={form}
				layout="inline"
				className={css.table_list_form}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
			>
				<Form.Item name="parkLotType" label="停车场类型: " className={css.item}>
					<Select style={{ width: 240 }} placeholder="请选择">
						<Select.Option value={1}>配建</Select.Option>
						<Select.Option value={2}>公共</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item name="parkLevel" label="停车场等级: " className={css.item}>
					<Select style={{ width: 240 }} placeholder="请选择">
						<Select.Option value={0}>普通</Select.Option>
						<Select.Option value={1}>特级</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item name="districtName" label="&nbsp;&nbsp;&nbsp;所在区域:" className={css.item}>
					<Select style={{ width: 240 }} placeholder="请选择">
						{districtNames === undefined ? null : districtNames.map((d) => <Select.Option key={d}>{d}</Select.Option>)}
					</Select>
				</Form.Item>
				<Form.Item name="sno" label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;流水号:" className={css.item}>
					<Input placeholder="请输入" style={{ width: 240 }} />
				</Form.Item>
				<Form.Item name="name" label="停车场名称: " className={css.item}>
					<Input placeholder="请输入" style={{ width: 240 }} />
				</Form.Item>
				<Form.Item label="&nbsp;&nbsp;&nbsp;产权单位: " className={css.item}>
					<Input placeholder="请输入" style={{ width: 240 }} />
				</Form.Item>
				<Form.Item label="&nbsp;&nbsp;&nbsp;管理单位: " className={css.item}>
					<Input placeholder="请输入" style={{ width: 240 }} />
				</Form.Item>
				<Form.Item name="status" label="&nbsp;&nbsp;&nbsp;管理状态: " className={css.item}>
					<Select style={{ width: 240 }} placeholder="请选择">
						<Select.Option value={0}>暂存</Select.Option>
						<Select.Option value={1}>审核中</Select.Option>
						<Select.Option value={2}>已退回</Select.Option>
						<Select.Option value={3}>已废弃</Select.Option>
						<Select.Option value={4}>已完成</Select.Option>
					</Select>
				</Form.Item>

				<div className={css.button}>
					<Button type="primary" htmlType="submit">
						查询
					</Button>
					<Button onClick={reset}>重置</Button>
				</div>
			</Form>
			<If condition={data !== null && data !== undefined}>
				<Table size="small" bordered columns={columns} dataSource={data} scroll={{ y: 'calc(100vh - 290px)' }} />
			</If>
		</>
	);
};
